<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view
				class="search-container flex-center"
				style="margin: 0 16rpx;width: 100%;"
				>
					<image
					src="@/static/image/common/search.png"
					style="width: 32rpx; height: 32rpx"
					class="clear-flex u-m-r-14"></image>
					<input
					 v-model="keyword"
					 :placeholder="lang_order.searchTips"
					 style="width: 100%;"
					 @confirm="searchAction(keyword)"
					 />
				</view>
				<view
				class="clear-flex"
				@click="searchAction(keyword)">{{ lang_common.search }}</view>
			</view>
			
			<!-- 分割线 -->
			<u-gap height="1" bgColor="rgba(0, 0, 0, 0.07)"></u-gap>
		</view>
		
		<mescroll-body height="calc(100vh - 100rpx - var(--status-bar-height))" ref="mescrollRef"
				@init="mescrollInit" @down="downCallback" @up="upCallback">
			<view>
				<view style="padding: 12rpx 40rpx 0;">
					<view class="u-f-32 u-lh-44 font-medio">{{ lang_common.hotWordSearch }}</view>
					<view>
						<view  v-for="(item, index) in hotWordList" :key="index"
						style="display: inline-block;"
						class="u-p-t-20 u-p-r-26 u-f-28 u-lh-40"
						@click="searchAction(item.title)">
							<view style="padding: 10rpx 24rpx;border-radius: 100rpx;background-color: #F2F3F3;">{{ item.title || '' }}</view>
						</view>
					</view>
				</view>
				
				<!-- 列表 -->
				<view>
					<view>
						<view
						v-for="(item, index) in keys"
						:key="index"
						class="flex-between"
						style="padding: 22rpx 34rpx 16rpx;"
						@click="searchAction(item)">
							<view class="u-m-r-20">{{ item }}</view>
							
							<view class="u-p-t-4">
								<image
								src="@/static/image/common/close_grew.png"
								style="width: 20rpx; height: 20rpx;"
								class="clear-flex"
								@tap.stop="deleteKey(index)"></image>
							</view>
						</view>
					</view>
					
					<view
					v-if="keys.length"
					class="u-f-24 u-lh-34 u-text-center"
					style="color: #C5C5C5;"
					@click="deleteAllKey"
					>{{ lang_common.deleteRecord }}</view>
				</view>
				
				<!-- 留空 -->
				<view style="height: 200rpx"></view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import { ORDER_SEARCH } from '@/storage.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				keyword: '',
				keys: []
			}
		},
		created() {
			// 获取本地存储-订单关键字
			let value = uni.getStorageSync(ORDER_SEARCH)
			if (value) {
				value = JSON.parse(value)
				this.keys = value
			}
		},
		methods: {
			// 搜索后触发保存关键字
			searchAction(keyword) {
				if (keyword) {
					this.keys.unshift(keyword)
					this.keys = [...new Set(this.keys)]
					this.saveKey()
					
					this.jumpUrl(`/pages/user/order/search/list/list?keyword=${ keyword }`)
				} else {
					this.$api.msg(this.lang_common.pleaseInput)
				}
			},
			// 清空关键字
			deleteAllKey() {
				this.keys = []
				uni.removeStorageSync(ORDER_SEARCH)
			},
			// 删除关键字
			deleteKey(index) {
				this.keys.splice(index, 1)
				this.saveKey()
			},
			// 保存关键字
			saveKey() {
				uni.setStorageSync(ORDER_SEARCH, JSON.stringify(this.keys))
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			async upCallback(page) {
				let node = this.$refs['mescrollRef']
				if (page.num > 1) {
					node && node.mescroll.endSuccess(10);
					return
				} 
				await this.$store.dispatch('initHotList').catch(() => {
					node && node.mescroll.endErr();
				})
				node && node.mescroll.endSuccess(10);
			},
			downCallback() {
				let node = this.$refs['mescrollRef']
				node && node.mescroll.resetUpScroll()
			}
		}
	}
</script>

<style scoped lang="scss">
	.search-container {
		width: 100%;
		padding: 16rpx 30rpx;
		border-radius: 100rpx;
		background-color: #F6F6F6;
	}
</style>
